<extend name="./Themes/tdt/Template/Layout/Layout.html" />
<block name="style">
<link rel="stylesheet" href="__THEME__/zTree_v3/css/demo.css" />
<link rel="stylesheet" href="__THEME__/zTree_v3/css/zTreeStyle/zTreeStyle.css" />
<link rel="stylesheet" href="__THEME__/css/index.css" />
<link rel="stylesheet" href="__PUBLIC__/Build/Cesium/Widgets/widgets.css" />
<style>
   /* #cesiumContainer { position: absolute; left: 0; width: 50%; height: 97.5%; margin: 0; padding: 0; overflow: hidden; background-color: #152950; }
    #mapContainer { position: relative; left: 50%; top: 0; width: 50%; height: 100%; margin: 0; padding: 0; overflow: hidden; background-color: #152950; }*/
    #rightLayer{width:270px;height: 350px;overflow: hidden;display:none; position: absolute; right: 20px; top: 100px; z-index: 10;}
    #results{  width: 233px;padding: 0px; height: 350px; overflow: hidden; overflow-y: scroll;  background-color: rgba(84, 157, 253,0.7);}
    /*#results .TreeAutoCreate>ul{ padding-left:10px;}
    #resulst a{color: #fff;}
    .sqlselectdiv{ display: none; position: absolute; width: 210px; top: 30px; z-index: 10000; right: 0px; background: #fff; padding: 15px; }  
    .Vagueselectdiv{ display: none; position: absolute; width: 210px; top: 30px; z-index: 10000; right: 0px; background: #fff; padding: 15px; }  
    td{
    	color: #FFFFFF;
    }*/
    </style>
</block>
<block name="body">
<div id="content" data-calc-height="100%-0">
	<div id="left">
		<ul id="tab" class="clearfix">
			<li class="tab-item current" role="#tab-search"></li>
			<li class="tab-item" role="#tab-nav"></li>
			<li class="tab-item" role="#tab-layer"></li>
		</ul>
		<div id="tab-content">
			<div class="tab-pane" id="tab-search">
				<!-- 查询star -->
				<h3 class="header"><i class="fa fa-bars"></i> 信息</h3>
				<div style="padding-top: 0">
				  <ul class="site-doc-icon">
						<li>
							<i class="fa fa-map-marker"></i>
							<a class="name" href="#" id="infoHot" name="ZG电力站点@py02.1">热点信息</a>
						</li>
						<!-- <li>
							<i class="fa fa-retweet"></i>
							<a class="name" href="#" id="vectorInfo">矢量要素信息</a>
						</li> -->
				  </ul>
				</div>
				<h3 class="header"><i class="fa fa-search"></i> 查询</h3>
				<div style="padding-top: 0;">
				   <div class="layui-input-inline">
							<input id="searchName" placeholder="输入您要定位的名称" lay-verify="required" autocomplete="off" class="layui-input">
						</div>
						<button id="searchBuild" class="layui-btn mt10 h35 layui-btn-normal">定位</button>
				</div>
				
				<!-- end查询 -->
			</div>
			<div class="tab-pane" id="tab-nav">
				<!-- 分析star -->
				<h3 class="header"><i class="fa fa-share"></i> 专题图</h3>
				<ul class="site-doc-icon">
					<li>
						<i class="fa fa-globe"></i>
						<a class="name" href="#" id="landUsed">土地利用</a>
					</li>					
					<li>
						<i class="fa fa-tag"></i>
						<a class="name" href="#" id="labelTheme">标签专题</a>
					</li>			
				</ul>                
				<b class="header m10 ml5">数值类专题:</b>
				<ul class="site-doc-icon">
					<li>
						<i class="fa fa-area-chart"></i>
						<a class="name landUsedRank" href="#" role="Green_space">绿地率</a>
					</li>					
					<li>
						<i class="fa fa-arrow-circle-up"></i>
						<a class="name landUsedRank" href="#" role="aboveground_rate">地上容积率</a>
					</li>
					<li>
						<i class="fa fa-building"></i>
						<a class="name landUsedRank" href="#" role="Building_density">建筑密度</a>
					</li>	
					<li>
						<i class="fa fa-users"></i>
						<a class="name landUsedRank" href="#" role="population">人口</a>
					</li>
					<li>
						<i class="fa fa-arrow-circle-down"></i>
						<a class="name landUsedRank" href="#" role="Building_area">建筑面积</a>
					</li>
					<li>
						<i class="fa fa-pie-chart"></i>
						<a class="name landUsedRank" href="#" role="area">面积</a>
					</li>								
				</ul> 
				
				<h3 class="header"><i class="fa fa-bar-chart"></i> 统计分析</h3>
				<ul class="site-doc-icon">
					<li>
						<i class="fa fa-files-o"></i>
						<a class="name" href="#" id="multipleChoice">多选统计</a>
					</li>
					<li>
						<i class="fa fa-star"></i>
						<a class="name" href="#" id="geometric">框选统计</a>
					</li>
					<li>
						<i class="fa fa-star"></i>
						<a class="name" href="#" id="polygonalSelection">多边形统计</a>
					</li>
				</ul>
				<h3 class="header"><i class="fa fa-crosshairs"></i> 空间分析</h3>
				<ul class="site-doc-icon">
					<li>
						<i class="fa fa-anchor"></i>
						<a class="name" href="#" id="bufferAnalyse">缓冲区分析</a>
					</li>
					<li>
						<i class="fa fa-globe"></i>
						<a class="name" href="#" id="surfaceAnalysis">表面分析</a>
					</li>
				</ul>
				<b class="header m10 ml5">差值分析:</b>
				<ul class="site-doc-icon">
					<li>
						<i class="fa fa-ellipsis-h"></i>
						<a class="name" href="#" id="pointDensity">点密度</a>
					</li>
					<li>
						<i class="fa fa-arrows-h"></i>
						<a class="name" href="#" id="reverseDistance">反距离</a>
					</li>
					<li>
						<i class="fa fa-bullseye"></i>
						<a class="name" href="#" id="kelvjin">克吕金</a>
					</li>
					<li>
						<i class="fa fa-futbol-o"></i>
						<a class="name" href="#" id="discretePoints">离散点</a>
					</li>
				</ul>
				<!--下方功能未完成-->
				<h3 class="header" style="color:#aaa!important;"><i class="ace-icon fa fa-wifi"></i> 网络分析</h3>
				<ul class="site-doc-icon">
					<li>
						<i class="fa fa-ils"></i>
						<a class="name" href="#" style="color:#ccc!important;">最近设施分析</a>
					</li>
					<li>
						<i class="fa fa-university"></i>
						<a class="name" href="#" style="color:#ccc!important;">多旅行商分析</a>
					</li>
					<li>
						<i class="fa fa-code-fork"></i>
						<a class="name" href="#" style="color:#ccc!important;">最佳路径分析</a>
					</li>
				</ul>

				<h3 class="header" style="color:#aaa!important;"><i class="fa fa-arrows-alt"></i> 动态数据</h3>
				<ul class="site-doc-icon">
					<li>
						<i class="fa fa-dot-circle-o"></i>
						<a class="name" href="#" style="color:#ccc!important;">点渐变</a>
					</li>
					<li>
						<i class="fa fa-line-chart"></i>
						<a class="name" href="#" style="color:#ccc!important;">线渐变</a>
					</li>
					<li>
						<i class="fa fa-industry"></i>
						<a class="name" href="#" style="color:#ccc!important;">面渐变</a>
					</li>
					<li>
						<i class="fa fa-spinner"></i>
						<a class="name" href="#" style="color:#ccc!important;">进度模拟</a>
					</li>
				</ul>

				<h3 class="header"><i class="fa fa-search"></i> 条件查询</h3>
				<div style="padding-top: 0;">
					<div class="layui-inline">
					  <!-- <div class="layui-input-inline">
						  <input placeholder="输入要查询的内容" lay-verify="required" autocomplete="off" class="layui-input" style="width:200px">
					  </div> -->
					    <form class="layui-form" action="">
							<div class="layui-form-item">
								<select id="sqlselectType" lay-filter="selectValue">
									<option selected="">绿地率</option>
									<option>地上容积率</option>
									<option>建筑密度</option>
									<option>人口</option>
									<option>建筑面积</option>
									<option>面积</option>
								</select> 
							</div>
						    <div class="layui-form-item">
								<div class="w70 mr5 fl">
									<input class="layui-input" id="sqlselectText1" value="绿地率" disabled>
								</div>
							    <div class="w50 mr5 fl">
							      <select id="sqlselectOption">
							        <option>></option>
							        <option><</option>
							        <option>=</option>
							      </select>
							    </div>
							    <div class="w70 mr5 fl">
							       <input class="layui-input" id="sqlselectText2">
								</div>
								<a href="javascript:void(0)" id="sqlselect" class="layui-btn h35 mt2 layui-btn-normal">查询</a>
							</div>    
						</form>					  
				    </div>
				</div>
				<!-- end分析 -->
			</div>
			<div class="tab-pane" id="tab-layer">
				<!-- 二维图层star -->
				<ul class="tw-layer">
						<li class="getlayer"><input id="getLayer" class="layerControl" type="checkbox" name=""> 图层开关
							<div id="getLayerTree" class="twLayer-div menuTree"></div>
						</li>
						<li><input id="baiduMap" type="checkbox"> 百度地图
							
						</li>
						<li><input  id="tiandiMap" type="checkbox"> 天地图
							
						</li>
						<!-- <li><input type="checkbox"> REST地图
							<div class="twLayer-div">
							  333333333333333
							</div>
						</li> -->
						<!-- <li><input type="checkbox"> 追踪图层
							<div class="twLayer-div">
							  4444444444444
							</div>
						</li> -->
				<!-- </ul> -->
				<!-- end 二维图层 -->
				
			</div>
		</div><br><br><br><br>
		<div class="banquan">
			<p>主办单位：<a href="javascript:void">平阴县规划局</a></p>
			<p>技术支持：<a href="javascript:void">山东同圆数字科技有限公司</a></p>
		</div>
	</div>
	<div id="right" data-calc-width="100%-304px">
		<div id="toolbar" class="clearfix">
			<div class="pull-left">
				<div class="set-mode">
					<span id="mode3d" class="m-btn" onclick="javascript:location.href='{:U('Index/index3d')}'">三维</span><span id="mode2d" class="m-btn active">二维</span>
				</div>
				<ul id="dict">
					<li>
						<div id="dict_text" class="active">平阴县</div>
						<div id="dictDiv">
							<div id="dict_list_title">
								<a class="sheng">平阴县</a>
								<div id="dict_close"></div>
							</div>
							<div id="dict_item">
								<div border="0" cellspacing="0" cellpadding="0" width="100%" id="cityTable">
									<ul shi="平阴县">
										<li><a id="sdpq" href="javascript:void(0);">湿地片区</a></li>
										<li><a id="lcpq" href="javascript:void(0);">老城片区</a></li>
										<li><a id="ycpq" href="javascript:void(0);">云翠片区</a></li>
										<li><a id="dbcyxcpq" href="javascript:void(0);">东部产业新城片区</a></li>										
										<li><a id="jszt" href="javascript:void(0);">锦水组团</a></li>	
										<li><a id="sgzt" href="javascript:void(0);">孙官组团</a></li>	
										<li><a id="smszt" href="javascript:void(0);">圣母山组团</a></li>
										<li><a id="gyyhxpq" href="javascript:void(0);">工业园核心片区</a></li>
									</ul>	
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="pull-right">
				<div id="popup" class="ol-popup">    
					<div class="btn-group" role="group" aria-label="...">
						<button id="distance"  type="button" class="btn btn-default">测距</button>
						<button id="area"  type="button" class="btn btn-default">测面</button>                 
						<div class="btn-group">
							<button id="plotting" type="button" class="btn btn-default dropdown-toggle"
							data-toggle="dropdown">标绘 <div  class="caret"></div>
						</button>
						<ul id="plot-list" class="dropdown-menu" role="menu" style="min-width:100%;">
							<li class="plotting" role='Point'><i class="fa fa-dot-circle-o"></i> 绘点 </li>
							<li class="plotting" role='LineString'><i class="fa fa-life-ring"></i>绘线 </li>
							<li class="plotting" role="Polygon"><i class="fa fa-area-chart"></i>绘面 </li>
							<li class="plotting" role="Circle"><i class="fa fa-circle"></i> 绘圆 </li>
						</ul>
					</div>
					<!-- <button id="vectorInfo"  type="button" class="btn btn-default">要素信息查询</button> -->
					<button id="swipe" ' type="button" class="btn btn-default">卷帘</button>
					<!-- <button id="printMap"  type="button" class="btn btn-default">打印</button> -->
					<button id="redact"  type="button" class="btn btn-default">编辑</button>
					<button id="cutMap"  type="button" class="btn btn-default">导出</button>
					<button id="clear"  type="button" class="btn btn-default">清除</button>
				<button id="layerBtn"  type="button" class="btn btn-default">图层</button>
				</div>
			</div>
<!-- 高级工具栏 -->
			<div id="popup2" class="ol-popup2">  
				<div class="btn-group" role="group" aria-label="...">
					<button id="educeInfo"  type="button" class="btn btn-default" >地图属性字段导出</button>
					<button id="vectorInfo"  type="button" class="btn btn-default">要素信息查询</button>
				</div>
			</div>
  			<!-- 修改编辑的工具栏 -->
  			<div id="popup4" class="ol-popup4">  
				<div class="btn-group-vertical" role="group" aria-label="...">
					<div class="btn-group">
							<button id="plotting" type="button" class="btn btn-default dropdown-toggle"
							data-toggle="dropdown">标绘 <div  class="caret"></div>
						</button>
						<ul id="plot-list" class="dropdown-menu" role="menu" style="min-width:100%;">
							<li class="plotting" role='Point'><i class="fa fa-dot-circle-o"></i> 绘点 </li>
							<li class="plotting" role='LineString'><i class="fa fa-life-ring"></i>绘线 </li>
							<li class="plotting" role="Polygon"><i class="fa fa-area-chart"></i>绘面 </li>
							<li class="plotting" role="Circle"><i class="fa fa-circle"></i> 绘圆 </li>
						</ul>
					</div>
			<button id="modification"  type="button" class="btn btn-default">修改</button>
				</div>
			</div>
		</div>
		</div>
		<div data-calc-height="100%-32px">
			<div id="rightLayer"><div id='results' class='content-main'>

				<li id="treeDemo" class="ztree"></li>
				<!-- <li class="getlayer"><input id="getLayer" class="layerControl" type="checkbox" name=""> 图层开关
					<div id="getLayerTree" class="twLayer-div menuTree"></div>
				</li> -->

				<li><input id="baiduMap" type="checkbox"> 百度地图

				</li>
				<li><input  id="tiandiMap" type="checkbox"> 天地图

				</li>  
			</div>
		</div> 			
		<div id="mapDiv" data-calc-height="100%-32px">
            <!-- 实时显示地图坐标 -->
            <div id="myposition"></div>
			<div class="vectorBox">
				<ul>
					<li>透明度：</li>
					<li></li>
				</ul>
			</div>
		</div>
		<input id="swipInput" type="range" style="width:100%; position:relative; z-index:999999; top:-40px; display:none;">
	</div>
	 <div id="left_hidden" class="left_hidden" title="收起左栏"></div>
</div>

<div id="info-tab" style="height:300px;overflow-y:auto">
    <div id="delOperator" class="ol-delOperator" style="height:300px;overflow-y:auto">
    <!-- <a href=# id="exportExcel">点击导出</a> -->
    <ul id="myTab" class="nav nav-tabs" >
	    <li class="active"><a href="#tableChart">表格</a></li>
	    <li><a href="#pieChart">饼状图</a></li>
	    <li><a href="#barGraph">柱状图</a></li>
	    <li><a href="#operation">操作</a></li>
	</ul>
	<div  class="tab-content">
		<div class="tab-pane active" id="tableChart" ></div>
		<div class="tab-pane" id="pieChart" style="width: 400px;height:200px;"></div>
		<div class="tab-pane" id="barGraph" style="width: 400px;height:200px;"></div>
		<div class="tab-pane" id="operation"><a href=# id="exportExcel">点击导出</a></div>
	</div>
</div>
</div>
<div id="info-box" >
	<div id="delOperator" class="ol-delOperator" style="width: 400px;height:300px;">
    <ul id="myTab" class="nav nav-tabs" >
	    <li class="active"><a href="#queryData">查看</a></li>
	    <li><a href="#editModify">编辑</a></li>
	    <li><a href="#adjunct">附件</a></li>

	</ul>
	<div  class="tab-content">
		<div class="tab-pane active" id="queryData" ></div>
		<div class="tab-pane" id="editModify" >
			<button id="saveFile"  type="button" class="btn btn-default">保存</button>
		</div>
		<div class="tab-pane" id="adjunct" ></div>
	</div>
</div>
</div>
<!-- <div id="info-box"></div> -->
<div id="info-table" style="height:300px;overflow-y:auto">	
	<ul id="myTab" class="nav nav-tabs" >
	    <li class="active"><a href="#tableChart_table">表格</a></li>
	    <li><a href="#pieChart_table">饼状图</a></li>
	    <li><a href="#barGraph_table">柱状图</a></li>
	    <li><a href="#operation">操作</a></li>
	</ul>
	<div  class="tab-content">
		<div class="tab-pane active" id="tableChart_table" >
			<table  class="table table-bordered mt10 text-centter">
				<tr>
					<td>控制</td><td>用地面积(hm2)</td><td>建筑面积(万m2)</td><td>居住户口(户)</td><td>停车位数(个)</td>
					<td>容积率</td><td>建筑密度</td><td>绿地率</td>
				</tr>
			</table>
		</div>
		<div class="tab-pane" id="pieChart_table" style="width: 400px;height:200px;"></div>
		<div class="tab-pane" id="barGraph_table" style="width: 400px;height:200px;"></div>
		<div class="tab-pane" id="operation"><a href=# id="exportExcel">点击导出</a></div>
	</div>
</div>


</block>
<block name="script">
<script>
//文件上传
var upfileURL = "{:U('Home/File/addFile')}";
//文件下载
var downFile = "{:U('Home/File/downFile')}?fileid=";
//文件删除
var delFile = "{:U('Home/File/delFile')}";
//文件查询
var selectFile = "{:U('Home/File/selectRecord')}";
var map,popup,draw,source,vectorLayer,resultLayer,themeLayer,urlData_1,interaction,registClickEvent,forTree,tree,view,returnFunction,resultLayer,layerBaidu,layerTianDi,layerTianDi2,markerLayer,SqlSelectJson,ThisUpShowLayer;
var pingyinLayer = urlPingyin = new Array();
var sum = 0,sum1 = 0,sum2 = 0;
var average1 = 1,average2 = 1;
var FlyLayerOpen = new Array(true,true,true,true,true,true,true,true); //需要对应图层数量，默认为全部打开
var onclk = false; //地图点击事件
var publicurl = "__PUBLIC__";
//侧边栏选择框
function oneChoice(){ 
	//点击多选框选择 
	var arr = new Array();
	$("input:checkbox[name='checks']:checked").each(function() { // 遍历name=test的多选框
  		arr.push($(this).val());  // 每一个被选中项的值
	 });
	console.log(arr); 
} 
 /*$(document).ready(function(){
     $.fn.zTree.init($("#treeDemo"), setting, zNodes);
})*/
 		/*var IDMark_A = "_a";
		var setting = {    
            check:{
            //chkboxType: { "Y": "ps", "N": "ps" },
            chkStyle: "checkbox",//复选框类型
            enable: true //每个节点上是否显示 CheckBox
           }, 
            data:    {
                simpleData:{
                    enable:true
                }
            },
            callback:{
                 beforeCheck:true,
                onCheck:onCheck
            },
			view: {
				
				addDiyDom: addDiyDom
			}
            
        };
                

        var zNodes =[
			{name:"图层开关", open:true,
				children:[
					   {name:"底图"},
					   {name:"地形图"},
					   {name:"ZG用地规划"},
					   {name:"ZG市政规划"},
					   {name:"ZG防灾景观规划"},
					   {name:"修建性规划"},
					   {name:"居住型规划"},
					   {name:"条件方案规划"}
				]}
	 	];*/

	 	/*function addDiyDom(treeId, treeNode) {
	 		if (treeNode.id==1) return;
	 		var aObj = $("#" + treeNode.tId + IDMark_A);
	 		var editStr = "<input id='XMove' type='range' min='-5' max='5' step='0.1' title='pitch' value='0' data-bind= 'value: pitch, valueUpdate: 'input''>";
	 		aObj.after(editStr);
				var btn = $("#diyBtn_"+treeNode.id);
				if (btn) btn.bind("change", function(){alert("diy Select value="+btn.attr("value")+" for " + treeNode.name);});
				
			}
			
            //getZTreeObj为空 获取不到节点内容
            function onCheck(e,treeId,treeNode){
            	var treeObj=$.fn.zTree.getZTreeObj("#treeDemo");
            	var nodes=treeObj.getCheckedNodes(true);
            	for(var i=0;i<nodes.length;i++){ 
           		 console.log(nodes[i]['name']); //获取选中节点的值
           		} 
           		
           	} */
/*编辑菜单的显示与隐藏*/
function Show_Hidden(obj)
{
 if(obj.style.display=="block")
 {
  obj.style.display='none';
 }
 else
 {
  obj.style.display='block';
 }
}
window.onload=function()
{
 var olink=document.getElementById("redact");
 var odiv=document.getElementById("popup4");
 olink.onclick=function()
 {
  Show_Hidden(odiv);
  return false;
 }
}
</script>
<script src="__PUBLIC__/js/Proj4js/proj4.js"></script>
<script src="__THEME__/js/index.js"></script>
<script src="__THEME__/js/echarts.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/OpenLayers/include-openlayers.js"></script>
<script type="text/javascript" src="__PUBLIC__/OpenLayers/widgets.js"></script>
<script src="__PUBLIC__/js/require.min.js" defer async="true" data-main="__PUBLIC__/js/main2d.js?v={$version}"></script>
<script type="text/javascript" src="__PUBLIC__/OpenLayers/js/MapToImg.js"></script>
</block>
